<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业公告智能监控大屏 - 情感分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        /* 炒股软件风格配色 */
        :root {
            --bg-primary: #0D1421;
            --bg-secondary: #1A2332;
            --bg-card: rgba(26, 35, 50, 0.8);
            --text-primary: #E8F0FE;
            --text-secondary: #9CA3AF;
            --accent-red: #FF4757;
            --accent-green: #2ED573;
            --accent-orange: #FFA726;
            --accent-blue: #5DADE2;
            --border-color: rgba(255, 255, 255, 0.1);
            --glass-bg: rgba(26, 35, 50, 0.4);
            --glass-border: rgba(255, 255, 255, 0.1);
        }
        
        body {
            background: linear-gradient(135deg, var(--bg-primary) 0%, #1E2A3A 100%);
            color: var(--text-primary);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
        }
        
        .sidebar {
            background: var(--glass-bg);
            backdrop-filter: blur(15px);
            border-right: 1px solid var(--glass-border);
            transition: all 0.3s ease;
        }
        
        .nav-link {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .nav-link:hover, .nav-link.active {
            background: rgba(93, 173, 226, 0.1);
            border-left-color: var(--accent-blue);
        }
        
        .chart-container {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-blue), #3498DB);
            border: none;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #3498DB, var(--accent-blue));
            transform: translateY(-2px);
        }
        
        .btn-toggle {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            transition: all 0.3s ease;
        }
        
        .btn-toggle.active {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }

        /* 指标解释提示框 */
        .tooltip {
            position: relative;
            cursor: help;
        }
        
        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s;
            z-index: 1000;
        }
        
        .tooltip:hover::after {
            opacity: 1;
            visibility: visible;
        }

        /* 弹窗样式 */
        .modal {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background: var(--bg-secondary);
            border: 1px solid var(--glass-border);
            max-height: 80vh;
            overflow-y: auto;
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--accent-blue);
            border-radius: 4px;
        }
        
        /* 搜索栏样式 */
        .search-input {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
        }
        
        .search-input:focus {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.1);
        }
    </style>
</head>
<body>
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧导航栏 -->
        <div id="sidebar" class="sidebar w-64 flex-shrink-0 p-6">
            <div class="mb-8">
                <h1 class="text-xl font-bold text-white mb-2">企业公告监控</h1>
                <p class="text-sm text-gray-400">智能分析大屏系统</p>
            </div>
            
            <!-- 搜索筛选面板 -->
            <div class="mb-6 space-y-4">
                <h3 class="text-sm font-semibold text-gray-300 mb-3">搜索筛选</h3>
                
                <!-- 日期范围 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">日期范围</label>
                    <div class="flex space-x-2">
                        <input type="date" id="startDate" class="search-input text-xs p-2 rounded flex-1">
                        <input type="date" id="endDate" class="search-input text-xs p-2 rounded flex-1">
                    </div>
                </div>
                
                <!-- 公司搜索 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">公司名称</label>
                    <input type="text" id="companySearch" placeholder="输入公司名称或代码" class="search-input text-xs p-2 rounded w-full">
                </div>
                
                <!-- 关键词搜索 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">公告关键词</label>
                    <input type="text" id="keywordSearch" placeholder="输入关键词" class="search-input text-xs p-2 rounded w-full">
                </div>
                
                <!-- 情感筛选 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">情感类型</label>
                    <div class="space-y-1">
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-2" id="positiveFilter"> 
                            <span class="text-xs text-green-400">利好</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-2" id="negativeFilter"> 
                            <span class="text-xs text-red-400">利空</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-2" id="neutralFilter"> 
                            <span class="text-xs text-gray-400">中性</span>
                        </label>
                    </div>
                </div>
                
                <button id="applyFilters" class="btn-primary text-white px-4 py-2 rounded w-full text-xs">
                    应用筛选
                </button>
                <button id="resetFilters" class="btn-toggle text-gray-300 px-4 py-2 rounded w-full text-xs">
                    重置筛选
                </button>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="space-y-2">
                <a href="/" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">📊</span>
                    总览大屏
                </a>
                <a href="/source" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">📈</span>
                    公告来源分析
                </a>
                <a href="/sentiment" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg active">
                    <span class="mr-3">💭</span>
                    情感分析报告
                </a>
                <a href="/risk" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">⚠️</span>
                    风险监控预警
                </a>
                <a href="/system" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">⚙️</span>
                    系统运行状态
                </a>
            </nav>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="glass-card p-4 flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold text-white">情感分析报告</h2>
                    <p class="text-sm text-gray-400">企业公告情感倾向深度分析</p>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="refreshData" class="btn-primary px-4 py-2 rounded-lg text-sm">
                        🔄 刷新数据
                    </button>
                    <div class="text-sm text-gray-400">
                        更新时间: <span id="updateTime">--</span>
                    </div>
                </div>
            </header>

            <!-- 内容滚动区 -->
            <main class="flex-1 overflow-y-auto p-6 space-y-6">
                <!-- 情感概览指标 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="chart-container rounded-lg p-6 tooltip" data-tooltip="包含利好信息的公告总数">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">利好公告</p>
                                <p class="text-2xl font-bold text-green-400" id="positiveCount">0</p>
                            </div>
                            <div class="text-3xl">📈</div>
                        </div>
                    </div>
                    
                    <div class="chart-container rounded-lg p-6 tooltip" data-tooltip="包含利空信息的公告总数">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">利空公告</p>
                                <p class="text-2xl font-bold text-red-400" id="negativeCount">0</p>
                            </div>
                            <div class="text-3xl">📉</div>
                        </div>
                    </div>
                    
                    <div class="chart-container rounded-lg p-6 tooltip" data-tooltip="当前利好公告占所有已分析公告的比例">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">利好比例</p>
                                <p class="text-2xl font-bold text-green-400" id="positiveRatio">0%</p>
                            </div>
                            <div class="text-3xl">📊</div>
                        </div>
                    </div>
                    
                    <div class="chart-container rounded-lg p-6 tooltip" data-tooltip="当前利空公告占所有已分析公告的比例">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">利空比例</p>
                                <p class="text-2xl font-bold text-red-400" id="negativeRatio">0%</p>
                            </div>
                            <div class="text-3xl">📊</div>
                        </div>
                    </div>
                </div>

                <!-- 情感分布图表 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 利好等级分布 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">利好等级分布</h3>
                        <div id="positiveDistribution" style="height: 350px;"></div>
                    </div>
                    
                    <!-- 利空等级分布 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">利空等级分布</h3>
                        <div id="negativeDistribution" style="height: 350px;"></div>
                    </div>
                </div>

                <!-- 情感强度分析 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 利好强度详情 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">利好强度详情</h3>
                        <div id="positiveIntensityChart" style="height: 350px;"></div>
                    </div>
                    
                    <!-- 利空强度详情 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">利空强度详情</h3>
                        <div id="negativeIntensityChart" style="height: 350px;"></div>
                    </div>
                </div>

                <!-- 热门情感关键词 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 热门利好关键词 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">热门利好关键词</h3>
                        <div id="positiveKeywords" class="space-y-2 max-h-80 overflow-y-auto">
                            <!-- 动态加载 -->
                        </div>
                    </div>
                    
                    <!-- 热门利空关键词 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">热门利空关键词</h3>
                        <div id="negativeKeywords" class="space-y-2 max-h-80 overflow-y-auto">
                            <!-- 动态加载 -->
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 详情弹窗 -->
    <div id="detailModal" class="modal fixed inset-0 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="modal-content rounded-lg p-6 w-full max-w-4xl">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-white" id="modalTitle">详情信息</h3>
                    <button id="closeModal" class="text-gray-400 hover:text-white text-2xl">&times;</button>
                </div>
                <div id="modalContent" class="space-y-4 max-h-96 overflow-y-auto">
                    <!-- 动态加载详情内容 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        let charts = {};
        let currentFilters = {};
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            loadData();
            
            // 设置定时刷新
            setInterval(loadData, 60000); // 每分钟刷新一次
            
            // 绑定事件
            bindEvents();
        });
        
        function initCharts() {
            charts.positiveDistribution = echarts.init(document.getElementById('positiveDistribution'));
            charts.negativeDistribution = echarts.init(document.getElementById('negativeDistribution'));
            charts.positiveIntensity = echarts.init(document.getElementById('positiveIntensityChart'));
            charts.negativeIntensity = echarts.init(document.getElementById('negativeIntensityChart'));
        }
        
        function bindEvents() {
            // 刷新数据按钮
            document.getElementById('refreshData').addEventListener('click', loadData);
            
            // 筛选功能
            document.getElementById('applyFilters').addEventListener('click', applyFilters);
            document.getElementById('resetFilters').addEventListener('click', resetFilters);
            
            // 弹窗关闭
            document.getElementById('closeModal').addEventListener('click', closeModal);
            document.getElementById('detailModal').addEventListener('click', function(e) {
                if (e.target === this) closeModal();
            });
        }
        
        async function loadData() {
            try {
                // 加载情感分析统计数据
                const statsData = await fetch('/api/sentiment/analysis-stats').then(r => r.json());
                updateSentimentStats(statsData);
                
                // 加载情感强度分布数据
                const intensityData = await fetch('/api/sentiment/intensity-distribution').then(r => r.json());
                updateIntensityCharts(intensityData);
                
                // 加载关键词数据
                await Promise.all([
                    loadKeywords('positive'),
                    loadKeywords('negative')
                ]);
                
                // 更新时间
                document.getElementById('updateTime').textContent = new Date().toLocaleString();
                
            } catch (error) {
                console.error('加载数据失败:', error);
            }
        }
        
        function updateSentimentStats(data) {
            // 计算利好和利空的总数
            let positiveTotal = 0;
            let negativeTotal = 0;
            
            data.positive_distribution.forEach(item => {
                if (item.level !== '无利好信息') {
                    positiveTotal += item.count;
                }
            });
            
            data.negative_distribution.forEach(item => {
                if (item.level !== '无利空信息') {
                    negativeTotal += item.count;
                }
            });
            
            const total = positiveTotal + negativeTotal;
            const positiveRatio = total > 0 ? (positiveTotal / total * 100).toFixed(1) : 0;
            const negativeRatio = total > 0 ? (negativeTotal / total * 100).toFixed(1) : 0;
            
            document.getElementById('positiveCount').textContent = positiveTotal;
            document.getElementById('negativeCount').textContent = negativeTotal;
            document.getElementById('positiveRatio').textContent = positiveRatio + '%';
            document.getElementById('negativeRatio').textContent = negativeRatio + '%';
            
            // 更新分布图表
            updateDistributionChart('positiveDistribution', data.positive_distribution, '利好', '#2ED573');
            updateDistributionChart('negativeDistribution', data.negative_distribution, '利空', '#FF4757');
        }
        
        function updateDistributionChart(chartId, data, type, color) {
            const chart = charts[chartId];
            
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#5DADE2',
                    textStyle: { color: '#fff' }
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        color: '#E8F0FE',
                        formatter: '{b}\n{c}条 ({d}%)'
                    },
                    data: data.map(item => ({
                        value: item.count,
                        name: item.level,
                        itemStyle: {
                            color: item.level.includes('无') ? '#4B5563' : color
                        }
                    }))
                }]
            };
            
            chart.setOption(option);
        }
        
        function updateIntensityCharts(data) {
            // 利好强度图表
            updateIntensityChart('positiveIntensity', data.positive_intensity, '利好', '#2ED573');
            
            // 利空强度图表
            updateIntensityChart('negativeIntensity', data.negative_intensity, '利空', '#FF4757');
        }
        
        function updateIntensityChart(chartId, data, type, color) {
            const chart = charts[chartId];
            
            const categories = Object.keys(data);
            const values = categories.map(cat => data[cat].count);
            
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#5DADE2',
                    textStyle: { color: '#fff' },
                    formatter: function(params) {
                        const item = params[0];
                        const level = item.axisValue;
                        const count = item.value;
                        const details = data[level]?.details || [];
                        
                        let tooltip = `${level}: ${count}条<br/>`;
                        tooltip += '点击查看详情';
                        return tooltip;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: categories,
                    axisLine: { lineStyle: { color: '#5DADE2' } },
                    axisLabel: { 
                        color: '#E8F0FE',
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#5DADE2' } },
                    axisLabel: { color: '#E8F0FE' },
                    splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
                },
                series: [{
                    type: 'bar',
                    data: values,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: color },
                            { offset: 1, color: color + '80' }
                        ])
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#E8F0FE'
                    }
                }]
            };
            
            chart.setOption(option);
            
            // 绑定点击事件
            chart.off('click');
            chart.on('click', function(params) {
                const level = params.name;
                const details = data[level]?.details || [];
                showDetailModal(`${type}等级: ${level}`, details, type);
            });
        }
        
        async function loadKeywords(type) {
            try {
                const data = await fetch(`/api/overview/keywords?keyword_type=${type}`).then(r => r.json());
                const containerId = type === 'positive' ? 'positiveKeywords' : 'negativeKeywords';
                const container = document.getElementById(containerId);
                
                container.innerHTML = data.map(item => `
                    <div class="flex justify-between items-center p-3 rounded bg-gray-800 bg-opacity-50 hover:bg-opacity-70 cursor-pointer keyword-item" 
                         data-keyword="${item.keyword}" data-type="${type}" data-details='${JSON.stringify(item.details)}'>
                        <span class="text-sm text-white">${item.keyword}</span>
                        <span class="text-xs px-2 py-1 rounded ${type === 'positive' ? 'bg-green-500' : 'bg-red-500'} text-white">
                            ${item.count}条
                        </span>
                    </div>
                `).join('');
                
                // 绑定关键词点击事件
                document.querySelectorAll('.keyword-item').forEach(item => {
                    item.addEventListener('click', function() {
                        const keyword = this.dataset.keyword;
                        const details = JSON.parse(this.dataset.details);
                        const type = this.dataset.type;
                        showDetailModal(`${type === 'positive' ? '利好' : '利空'}关键词: ${keyword}`, details, type);
                    });
                });
                
            } catch (error) {
                console.error('加载关键词失败:', error);
            }
        }
        
        function showDetailModal(title, details, type) {
            const modal = document.getElementById('detailModal');
            const modalTitle = document.getElementById('modalTitle');
            const content = document.getElementById('modalContent');
            
            modalTitle.textContent = title;
            
            content.innerHTML = details.map(detail => `
                <div class="bg-gray-800 bg-opacity-50 rounded p-4 border-l-4 ${type === 'positive' ? 'border-green-500' : 'border-red-500'}">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-medium text-white">${detail.title}</h4>
                        <span class="text-xs text-gray-400">${formatDate(detail.publishTime)}</span>
                    </div>
                    <p class="text-sm text-gray-300 mb-2">${detail.secCode} - ${detail.secName}</p>
                    <p class="text-sm text-gray-400">${detail.reason}</p>
                </div>
            `).join('');
            
            modal.classList.remove('hidden');
        }
        
        function closeModal() {
            document.getElementById('detailModal').classList.add('hidden');
        }
        
        function applyFilters() {
            // 收集筛选条件
            currentFilters = {
                startDate: document.getElementById('startDate').value,
                endDate: document.getElementById('endDate').value,
                company: document.getElementById('companySearch').value,
                keyword: document.getElementById('keywordSearch').value,
                positive: document.getElementById('positiveFilter').checked,
                negative: document.getElementById('negativeFilter').checked,
                neutral: document.getElementById('neutralFilter').checked
            };
            
            // 重新加载数据
            loadData();
        }
        
        function resetFilters() {
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
            document.getElementById('companySearch').value = '';
            document.getElementById('keywordSearch').value = '';
            document.getElementById('positiveFilter').checked = false;
            document.getElementById('negativeFilter').checked = false;
            document.getElementById('neutralFilter').checked = false;
            
            currentFilters = {};
            loadData();
        }
        
        function formatDate(dateStr) {
            return new Date(dateStr).toLocaleString('zh-CN');
        }
        
        // 响应式处理
        window.addEventListener('resize', function() {
            Object.values(charts).forEach(chart => {
                if (chart) chart.resize();
            });
        });
    </script>
</body>
</html> 